<template>
  <div class="app-container">
    <Find @Launchform="Launchform" :OriginalFilter="{ static: true }" :formList="formList1" />
    <el-card style="margin-top: 15px" shadow="always" :body-style="{ padding: '20px' }">
      <el-button type="primary" size="default" @click="li">{{ $t(`Print.AnalysisOfOrderChangeData`) }}</el-button>
      <div style="display: flex">
        <div style="width: 50%">
          <Table
            @download="download"
            @currentRow="currentRow11"
            :isLoading="isLoading1"
            :tableHeader="tableHeader3"
            :tableData="MainTableDateTableDate"
            :TableHeight="92"
          />
          <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
        </div>

        <div style="width: 40%; margin-left: 30px">
          <h1>{{ $t(`Print.ProcessChangeInformation`) }}</h1>
          <Table
            @inputChange="confirmChange1"
            :tableHeader="tableHeader2"
            :isLoading="isLoading2"
            :tableData="processQeuryTableDate"
            :TableHeight="40"
          />
          <h1 style="margin-top: 20px">{{ $t(`Print.OrderChangeInformation`) }}</h1>
          <Table :tableHeader="tableHeader1" :isLoading="isLoading3" :tableData="OrderChangeCnquiryTableDate" :TableHeight="40" />
        </div>
      </div>
    </el-card>

    <el-dialog :title="$t(`Print.SelectTheCommandThatYouWantToQuery`)" v-model="dialogVisible" width="30%" class="dialog pb0">
      <Table @currentRow="currentRow1" :tableHeader="tableHeader5" :tableData="FindTheMatchingColorInstructionTableDate" :TableHeight="40" />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'OrderProcessChange'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  MainTableDate,
  processQeury,
  OrderChangeCnquiry,
  lotNoQuery,
  FindTheMatchingColorInstruction,
  FindTheMatching,
  ChangeData
} from '@/api/AccountingDepartment/ProductionLabel/OrderProcessChange'
import { ElMessage, ElMessageBox } from 'element-plus'
import LoginWork from '@/utils/LoginWork'
// 修改

const confirmChange1 = async (row: any) => {
  try {
    const result = await LoginWork.post<any, any>(`/cut/process/change/part/update`, row)
    if (result.code === 200) {
      // MainTableDateMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('修改失败请重试')
  }
}

// 变更
const ChangeDataParms = ref<any>()

const ChangeDataActive = ref<any>(false)
const ChangeDataActive1 = ref<any>('')

const ChangeDataMehtods = async () => {
  try {
    const result = await ChangeData(ChangeDataActive.value, ChangeDataParms.value)
    if (result.code === 200) {
      tableHeader3.value[6].prop = [{ label: '查找同配色指令', bgColor: '#1C84C6' }]
      JMessage.success(result.message)
      ChangeDataActive.value = false
      MainTableDateMethods()
    } else if (result.code === 301) {
      ChangeDataActive1.value = result.message

      handleCloseMateriaLKlc()
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.error('变更资料处理失败请重试')
  }
}

const handleCloseMateriaLKlc = (_done?: () => void) => {
  ElMessageBox.confirm(ChangeDataActive1.value)
    .then(async () => {
      ChangeDataActive.value = true
      ChangeDataMehtods()
    })
    .catch(() => {
      ChangeDataActive.value = false
    })
}

// 指令变更资料分析
const lotNoList1 = ref({
  lotNo: ''
})

const li = () => {
  if (lotNoList1.value.lotNo === '') {
    JMessage.warning('请先选择指令')
  } else {
    FindTheMatchingMethods()
  }
}

const Button = ref(false)

const FindTheMatchingMethods = async () => {
  try {
    const result = await FindTheMatching(lotNoList1.value)
    if (result.code === 200) {
      Button.value = true
      MainTableDateMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.warning('指令变更资料分析查询出错')
  }
}

// 查找同配色指令
const lotNoList = ref({
  lotNo: ''
})

const dialogVisible = ref(false)

const FindTheMatchingColorInstructionTableDate = ref([])

const currentRow1 = (row: any) => {
  MainTableDateParms.value.lotNo = row.lotNo
  formList1.value[0].selectValue = row.lotNo
  dialogVisible.value = false
}

const FindTheMatchingColorInstructionMethods = async () => {
  try {
    const result = await FindTheMatchingColorInstruction(lotNoList.value)
    if (result.code === 200) {
      FindTheMatchingColorInstructionTableDate.value = result.data.map((item: any) => {
        return { lotNo: item }
      })
      dialogVisible.value = true
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  } catch (error) {
    JMessage.warning('查找出错')
  }
}

const download = (row: any, label: any) => {
  if (label.label === '查找同配色指令') {
    lotNoList.value.lotNo = row.lotNo
    FindTheMatchingColorInstructionMethods()
  }
  if (label.label === '变更资料处理') {
    ChangeDataParms.value = row
    ChangeDataMehtods()
  }
}

// 指令查询
const totalLo = ref(0)

const lotNoQueryParms = ref({
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  style: ''
})

const Launchform = (row: any) => {
  MainTableDateParms.value.lotNo = row[0].selectValue
  lotNoList1.value.lotNo = row[0].selectValue
  MainTableDateMethods()
}

const handleSizeChange1 = (val: number) => {
  lotNoQueryParms.value.pageSize = val
  lotNoQueryMethods()
}
const handleCurrentChange1 = (val: number) => {
  lotNoQueryParms.value.pageNum = val
  lotNoQueryMethods()
}

const isLoading3 = ref(true)

const lotNoQueryMethods = async () => {
  isLoading3.value = true
  try {
    const result = await lotNoQuery(lotNoQueryParms.value)
    formList1.value[0].selectOptions = EvaluatesTheArrayReturnValue(result.list)
    totalLo.value = result.total
    isLoading3.value = false
  } catch (error) {
    isLoading3.value = false
    JMessage.error('指令查询出错')
  }
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

// 订单变更查询
const OrderChangeCnquiryParms = ref()

const OrderChangeCnquiryTableDate = ref([])

const OrderChangeCnquiryMethods = async () => {
  try {
    const result = await OrderChangeCnquiry(OrderChangeCnquiryParms.value)
    OrderChangeCnquiryTableDate.value = result
  } catch (error) {
    JMessage.warning('订单变更查询出错')
  }
}

// 工艺变更资料
const processQeuryParms = ref()

const isLoading2 = ref(true)

const processQeuryTableDate = ref([])

const processQeuryMethods = async () => {
  isLoading2.value = true
  try {
    const result = await processQeury(processQeuryParms.value)
    processQeuryTableDate.value = result.map((item: any) => {
      item.change = 'Y'
      item.disableConfirm = true
      return item
    })
    isLoading2.value = false
  } catch (error) {
    JMessage.error('工艺变更资料查询出错')
    isLoading2.value = false
  }
}

// 主表查询
const MainTableDateParms = ref({
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  style: ''
})

onMounted(() => {
  lotNoQueryMethods()
})

const total = ref(0)

const handleSizeChange = (val: number) => {
  MainTableDateParms.value.pageSize = val
  MainTableDateMethods()
}

const handleCurrentChange = (val: number) => {
  MainTableDateParms.value.pageNum = val
  MainTableDateMethods()
}

const isLoading1 = ref(true)

const MainTableDateTableDate = ref([])

const MainTableDateMethods = async () => {
  isLoading1.value = true
  try {
    const result = await MainTableDate(MainTableDateParms.value)
    let formatCurrentDateValue = formatCurrentDate(currentDate.value)
    console.log(formatCurrentDateValue)
    MainTableDateTableDate.value = result.list.map((item: any) => {
      if (item.dealFlag !== 'Y' && item.sysDate === formatCurrentDateValue) {
        item.functionRow = [
          { label: '查找同配色指令', bgColor: '#1C84C6' },
          { label: '变更资料处理', bgColor: '#23c6c8' }
        ]
      } else {
        item.functionRow = [{ label: '查找同配色指令', bgColor: '#1C84C6' }]
      }
      return item
    })

    total.value = result.total
    console.log(MainTableDateTableDate.value)
    if (result.list.length !== 0) {
      processQeuryParms.value = result.list[0]
      OrderChangeCnquiryParms.value = result.list[0]
      processQeuryMethods()
    }
    isLoading1.value = false
  } catch (error) {
    isLoading1.value = false
    JMessage.error('左侧表格数据查询出错')
  }
  Button.value = false
}

// 日期
const formatCurrentDate = (date?: any) => {
  const d = new Date(date)
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0') // 月份从 0 开始，因此需要加 1
  const day = String(d.getDate()).padStart(2, '0') // 确保前导零

  return `${year}-${month}-${day}`
}

const currentDate = ref(new Date())

const currentRow11 = (row: any) => {
  processQeuryParms.value = row
  OrderChangeCnquiryParms.value = row

  processQeuryMethods()
  OrderChangeCnquiryMethods()
}

const formList1 = ref<any>([
  {
    type: 'select',
    selectValue: '',
    selectP: '选择指令',
    selectLabel: '',
    selectOptions: [],
    PageModule: true,
    total: totalLo,
    handleSizeChange: handleSizeChange1,
    handleCurrentChange: handleCurrentChange1
  }
])

const tableHeader3 = ref<any>([
  {
    label: '指令号',
    prop: 'lotNo'
  },
  {
    label: '型体',
    prop: 'style'
  },
  {
    label: '颜色',
    prop: 'color'
  },
  {
    label: '变更日期',
    prop: 'sysDate'
  },
  {
    label: '变更用户',
    prop: 'sysUser'
  },
  {
    label: '是否处理',
    prop: 'dealFlag',
    type: 'svg'
  },
  {
    type: 'functionRow',
    width: '270px',
    label: '操作'
  }
])

const tableHeader2 = ref([
  {
    label: '旧部位',
    prop: 'oldPart',
    change: true
  },
  {
    label: '旧工艺',
    prop: 'oldProcess',
    change: true
  },
  {
    label: '新部位',
    prop: 'newPart',
    change: true
  },
  {
    label: '新工艺',
    prop: 'newProcess',
    change: true
  },
  {
    label: '变更说明',
    prop: 'changeMemo',
    change: true
  },
  {
    label: '新增部位每袋双数',
    prop: 'bagQty'
  }
])

const tableHeader1 = ref([
  {
    label: '号码',
    prop: 'sizeNo'
  },
  {
    label: '旧数量',
    prop: 'oldQty'
  },
  {
    label: '新数量',
    prop: 'newQty'
  },
  {
    label: '变更说明',
    prop: 'changeMemo'
  }
])

const tableHeader5 = ref([
  {
    label: '指令',
    prop: 'lotNo'
  }
])
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
